<%@ include file="/WEB-INF/jsp/common/include.jsp" %>
<%@ page pageEncoding="UTF-8"%>
<%@ page import="com.bac.rentmap.ad.flat.search.SearchParameters"%>
<%@ taglib prefix="app" uri="AppTags" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insertDefinition name="layout.tiles">
  <tiles:putAttribute name="pageMessageKey">add</tiles:putAttribute>
  <tiles:putAttribute name="addTab" value="selected"/>
  <tiles:putAttribute name="body">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/ui-lightness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<app:slaveServerUrl />/js/jquery/plugins/jquery.autocomplete.js"></script>
    <script type="text/javascript">
      function selectAddress(item){
        var i = item.value.indexOf(',');
        var street = item.value.substring(0, i);
        $('#street').val(street);
        var building = item.value.substring(i + 2);
        var buildingPartMarker = 'корп.';
        var buildingPart = '';
        var i = building.indexOf(buildingPartMarker);
        if(i > 0){
          var start = i + buildingPartMarker.length + 1;
          buildingPart = building.substring(start);
          building = building.substring(0, i);
        }
        else{
          var regex = /([0-9]+)(\D)/
          var m = building.match(regex);
          if(m){
            building = m[1];
            buildingPart = m[2];
          }
        }
        $('#building').val(building);
        $('#buildingPart').val(buildingPart);
      }
      var submitted = false;
      function preventDoubleSubmit(el){
        var res = !submitted;
        submitted = true;
        return res;
      }
      $(function() {
        $("#street").autocomplete("/autocomplete/address.do", {
          width: 260,
          matchCase: 1,
          selectFirst: false,
          extraParams: {city : function(){return $('#city').val()}},
          onItemSelect : selectAddress,
          filterResults : false
        });
      });
      function updatePeriod(perDay){
        $('#periodLabel').text(perDay == 'true' ? 'за сутки' : 'в месяц');
      }
    </script>
    <div>
      <div class="white-box">
        <div class="box-container">
          <h2>Сдам квартиру</h2>
          <form:form commandName="flatAd" method="post" id="flatAdForm">
            <input type="hidden" name="secureId" value="${secureId}"/>
            <spring:hasBindErrors name="flatAd">
              <p class="errorBlock">
                Исправьте ошибки
              </p>
            </spring:hasBindErrors>
            <table>
              <tr>
                <td>
                  <p><label for="city">Город:</label></p>
                </td>
                <td>
                  <p>
                    <fmt:setBundle basename="com.bac.rentmap.messages"/>
                    <span id="cityChange" class="select">
                      <form:select path="city">
                        <form:option value="minsk"><fmt:message key="label.city.minsk"/></form:option>
                        <form:option value="mogilev"><fmt:message key="label.city.mogilev"/></form:option>
                      </form:select>
                      <b><span class="link"><spring:message code="label.city.${flatAd.city}" /></span></b>
                    </span>
                    <form:errors path="city" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="street">Улица<span class="required">*</span>:</label></p></td>
                <td>
                  <p>
                    <form:input path="street"/>
                    <form:errors path="street" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="building">Номер дома<span class="required">*</span>:</label></p></td>
                <td>
                  <p>
                    <form:input path="building"/>
                    <form:errors path="building" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="buildingPart">Корпус:</label></p></td>
                <td>
                  <p>
                    <form:input path="buildingPart"/>
                    <form:errors path="buildingPart" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="roomCount">Количество&nbsp;комнат<span class="required">*</span>:</label></p></td>
                <td>
                  <p>
                    <form:input path="roomCount"/>
                    <form:errors path="roomCount" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="phone">Контактный&nbsp;телефон<span class="required">*</span>:</label></p></td>
                <td>
                  <p>
                    <form:input path="phone"/>
                    <span class="hint">Телефон в формате +375-xx-xxx-xx-xx или 8-xxx-xxx-xx-xx</span>
                    <form:errors path="phone" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="email">Электронная&nbsp;почта:</label></p></td>
                <td>
                  <p>
                    <form:input path="email"/>
                    <span class="hint">Укажите электронную почту чтобы впоследствие удалить объявление</span>
                    <form:errors path="email" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="price">Период<span class="required"></span>:</label></p></td>
                <td>
                  <p>
                    <form:radiobutton path="pricePerDay" value="false" onchange="updatePeriod(this.value)"/> на длительный срок
                    <form:radiobutton path="pricePerDay" value="true" onchange="updatePeriod(this.value)"/> на сутки
                  </p>
                </td>
              </tr>
              <tr>
                <td><p><label for="price">Цена <span id="periodLabel">в месяц</span><span class="required">*</span>:</label></p></td>
                <td>
                  <p>
                    <form:input path="price"/> $
                    <form:errors path="price" cssClass="errorBlock"/>
                  </p>
                </td>
              </tr>
            </table>
            <p>
              <label for="description">Дополнительная информация:</label><br />
              <form:textarea path="description" rows="4" cssStyle="width:100%"/>
              <form:errors path="description" cssClass="errorBlock"/>
            </p>
            <p>
              Настоятельно рекомендую добавить фотографии квартиры потому что:
            <ol class="text">
              <li>
                объявления с фотографиями обзванивают в первую очередь
              </li>
              <li>
                фотографии экономят ваше время фильтруя съёмщиков с завышенными требованиями (например тех кто хочет снять квартиру за 200$ с новой мебелью в метро)
              </li>
            </ol>
            </p>
            <c:forEach var="imageType" items="${imageTypes}">
              <iframe src="/ad/add/image/uploadedThumbnail.do?type=${imageType}&secureId=${secureId}&editor=add"
                      style="width : 800px; height : 180px; border : 0px"
                      marginheight="0" marginwidth="0" frameborder="0"
                      scrolling="no" overflow="hidden">
              </iframe>
            </c:forEach>

            <p>
              <span class="button"><button type="submit" onclick="return preventDoubleSubmit(this)">Опубликовать</button></span>
            </p>
          </form:form>
        </div>
      </div>
    </div>
  </tiles:putAttribute>
</tiles:insertDefinition>